<template>
  <section v-show="changeShowType =='food'" class="food_container">
    <section class="menu_container">
      <section class="menu_left" id="wrapper_menu" ref="wrapperMenu">
        <ul>
          <li v-for="(item,index) in menuList" :key="index" class="menu_left_li" :class="{activity_menu: index == menuIndex}" @click="chooseMenu(index)">
            <img :src="getImgPath(item.icon_url)" v-if="item.icon_url">
            <span>{{item.name}}</span>
            <span class="category_num" v-if="categoryNum[index]&&item.type==1">{{categoryNum[index]}}</span>
          </li>
        </ul>
      </section>
      <section class="menu_right" ref="menuFoodList">
        <ul>
          <li v-for="(item,index) in menuList" :key="index">
            <header class="menu_detail_header">
              <section class="menu_detail_header_left">
                <strong class="menu_item_title">{{item.name}}</strong>
                <span class="menu_item_description">{{item.description}}</span>
              </section>
              <span class="menu_detail_header_right" @click="showTitleDetail(index)"></span>
              <p class="description_tip" v-if="index == TitleDetailIndex">
                <span>{{item.name}}</span>
                {{item.description}}
              </p>
            </header>
            <section v-for="(foods,foodindex) in item.foods" :key="foodindex" class="menu_detail_list">
              <router-link :to="{path: 'shop/foodDetail', query:{image_path:foods.image_path, description: foods.description, month_sales: foods.month_sales, name: foods.name, rating: foods.rating, rating_count: foods.rating_count, satisfy_rate: foods.satisfy_rate, foods, shopId}}" tag="div" class="menu_detail_link">
                <section class="menu_food_img">
                  <img :src="imgBaseUrl + foods.image_path">
                </section>
                <section class="menu_food_description">
                  <h3 class="food_description_head">
                    <strong class="description_foodname">{{foods.name}}</strong>
                    <ul v-if="foods.attributes.length" class="attributes_ul">
                      <li v-if="attribute" v-for="(attribute, foodindex) in foods.attributes" :key="foodindex" :style="{color: '#' + attribute.icon_color,borderColor:'#' + attribute.icon_color}" :class="{attribute_new: attribute.icon_name == '新'}">
                        <p :style="{color: attribute.icon_name == '新'? '#fff' : '#' + attribute.icon_color}">{{attribute.icon_name == '新'? '新品':attribute.icon_name}}</p>
                      </li>
                    </ul>

                  </h3>
                  <p class="food_description_content">{{foods.description}}</p>
                  <p class="food_description_sale_rating">
                    <span>月售{{foods.month_sales}}份</span>
                    <span>好评率{{foods.satisfy_rate}}%</span>
                  </p>
                  <p v-if="foods.activity" class="food_activity">
                    <span :style="{color: '#' + foods.activity.image_text_color,borderColor:'#' +foods.activity.icon_color}">{{foods.activity.image_text}}</span>
                  </p>
                </section>
              </router-link>
              <footer class="menu_detail_footer">
                <section class="food_price">
                  <span>¥</span>
                  <span>{{foods.specfoods[0].price}}</span>
                  <span v-if="foods.specifications.length">起</span>
                </section>
                <buy-cart :shopId='shopId' :foods='foods' @moveInCart="listenInCart" @showChooseList="showChooseList" @showReduceTip="showReduceTip" @showMoveDot="showMoveDotFun"></buy-cart>
              </footer>
            </section>
          </li>
        </ul>
      </section>
    </section>
    <section class="buy_cart_container">
      <section @click="toggleCartList" class="cart_icon_num">
        <div class="cart_icon_container" :class="{cart_icon_activity: totalPrice > 0, move_in_cart:receiveInCart}" ref="cartContainer">
          <span v-if="totalNum" class="cart_list_length">
            {{totalNum}}
          </span>
          <svg class="cart_icon">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-icon"></use>
          </svg>
        </div>
        <div class="cart_num">
          <div>¥ {{totalPrice}}</div>
          <div>配送费¥{{deliveryFee}}</div>
        </div>
      </section>
      <section class="gotopay" :class="{gotopay_acitvity: minimumOrderAmount <= 0}">
        <span class="gotopay_button_style" v-if="minimumOrderAmount > 0">还差¥{{minimumOrderAmount}}起送</span>
        <router-link :to="{path:'/confirmOrder', query:{geohash, shopId}}" class="gotopay_button_style" v-else>去结算</router-link>
      </section>
    </section>
    <transition name="toggle-cart">
      <section class="cart_food_list" v-show="showCartList&&cartFoodList.length">
        <header>
          <h4>购物车</h4>
          <div @click="clearCart">
            <svg>
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-remove"></use>
            </svg>
            <span class="clear_cart">清空</span>
          </div>
        </header>
        <section class="cart_food_details" id="cartFood">
          <ul>
            <li v-for="(item, index) in cartFoodList" :key="index" class="cart_food_li">
              <div class="cart_list_num">
                <p class="ellipsis">{{item.name}}</p>
                <p class="ellipsis">{{item.specs}}</p>
              </div>
              <div class="cart_list_price">
                <span>¥</span>
                <span>{{item.price}}</span>
              </div>
              <section class="cart_list_control">
                <span @click="removeOutCart(item.category_id, item.item_id, item.food_id, item.name, item.price, item.specs)">
                  <svg>
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-minus"></use>
                  </svg>
                </span>
                <span class="cart_num">{{item.num}}</span>
                <svg class="cart_add" @click="addToCart(item.category_id, item.item_id, item.food_id, item.name, item.price, item.specs)">
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-add"></use>
                </svg>
              </section>
            </li>
          </ul>
        </section>
      </section>
    </transition>
    <transition name="fade">
      <div class="screen_cover" v-show="showCartList&&cartFoodList.length" @click="toggleCartList"></div>
    </transition>
  </section>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {}
  },
  methods: {},
  mounted() {}
}
</script>

<style scoped>
</style>